<template>
  <div>
    <el-container style="height: 100vh;">
      <el-aside :width="asideWidth" style="overflow-x: hidden;">
        <div
          style="padding: 20px 0;text-align: center;margin-right: 50px;color: #ececec;white-space: nowrap;font-weight: bold;">
          <span>
            后台管理系统
          </span>
        </div>
        <el-menu
          :default-active="defaultActive"
          router
          background-color="#334157"
          text-color="#fff"
          active-text-color="#409eff"
          unique-opened
          @select="menuSelect">
            <el-menu-item index="user">
              <span class="marginRight" slot="title">用户管理</span>
            </el-menu-item>
            <el-menu-item index="article">
              <span class="marginRight" slot="title">文章管理</span>
            </el-menu-item>
            <el-menu-item index="comment">
              <span class="marginRight" slot="title">评论管理</span>
            </el-menu-item>
            <el-menu-item  index="category">
              <span class="marginRight" slot="title">分类管理</span>
              </el-menu-item>
            <el-menu-item  index="tag">
              <span class="marginRight" slot="title">标签管理</span>
              </el-menu-item>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header style="text-align: right; font-size: 18px;color: #606266;  cursor: pointer;position: relative;">
          <i class="el-icon-s-operation wr-15" style="position:absolute;left: 25px;line-height: 60px;"
             @click="slideToggle"></i>
          <span style="position:absolute;left: 60px;line-height: 60px;font-size: 16px;">
                当前位置：{{ nav }}
          </span>
          <i class="el-icon-menu wr-15" @click="drawer = true"></i>
          <el-dropdown style="font-size: 16px;">
            <span class="el-dropdown-link" style="color: #606266;">
                            <i class="el-icon-user"></i>
              {{ username }}
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                个人资料
              </el-dropdown-item>
              <el-dropdown-item divided @click.native="logout">
                退出系统
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-header>
        <el-main style="overflow-x: hidden;padding:15px;">
          <transition name="slide-fade">
            <router-view style="overflow: hidden;"/>
          </transition>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import {getToken, getUserName} from '@/request/token'
import {Message} from "element-ui";

export default {
  created() {
    this.checkLogin();
    this.username = localStorage.username
  },
  data() {
    return {
      username: '',
      defaultActive: "user",
      asideWidth: "230px",//菜单宽度
      drawer: false,
      nav: "用户管理",
      navData: {
        article: "文章管理",
        user: "用户管理",
        category: "分类管理",
        tag: "标签管理",
        comment: "评论管理",
      },
    }
  },
  computed: {
    user() {
      let login = this.$store.state.account.length != 0
      let avatar = this.$store.state.avatar
      return {
        login, avatar
      }
    }
  },
  methods: {
    checkLogin() {
      if (typeof (getToken()) == "undefined") {
        Message({
          type: 'warning',
          showClose: true,
          message: '管理员请先登录哦'
        })
        this.$router.push({path: `/`})
      }
    },
    logout() {
      let that = this
      this.$store.dispatch('logout').then(() => {
        this.$router.push({path: '/'})
      }).catch((error) => {
        if (error !== 'error') {
          that.$message({message: error, type: 'error', showClose: true});
        }
      })
    },
    search() {

    },
    // 重置
    reset() {

    },
    swich() {
      if (typeof (getToken()) == "undefined") {
        Message({
          type: 'warning',
          showClose: true,
          message: '请先登录哦'
        })
      } else {

      }

    },
    addAdmin() {

    },
    menuSelect(a, arr) {
      console.log(this.navData[a])
      this.nav = this.navData[a] || ""
    },
    slideToggle() {
      this.asideWidth = this.asideWidth !== "0" ? "0" : "230px";
    }
  }
}
</script>

<style>


.el-header {
  background-color: #ffffff;
  line-height: 60px;
  box-shadow: 0 2px 10px #c4c4c4;
  z-index: 1;
  user-select: none;
}

.el-aside {
  color: #333;
  box-shadow: 3px 0 10px #c4c4c4;
  z-index: 2;
  background-color: #334157;
  border-right: none;
  transition: width 0.5s;
}

.el-container {
  width: 100%;
}

.el-menu {
  border-right: none;
}

.el-menu-item {
}

.el-menu--inline .el-menu-item {
  background-color: #1f2d3d !important;
}

.is-active {
  background: #273344 !important;
}

.wr-15 {
  margin-right: 15px;
}

.slide-fade-enter-active {
  -webkit-transition: all .5s ease;
}

.slide-fade-leave-active {
  -webkit-transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}

.slide-fade-enter, .slide-fade-leave {
  -webkit-transform: translateX(100px);
  opacity: 0;
}

.marginRight {
  margin-left: 20px;
}
</style>
